<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>语音增强对比平台 | Voice Enhancement</title>
  <link rel="stylesheet" href="/src/css/style.css">
</head>
<body>
  <!-- 导航栏 -->
  <nav class="navbar">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <h1 class="text-xl font-bold">语音增强对比平台</h1>
      <div class="flex items-center space-x-4">
        <a href="#intro" class="hover:text-gray-200">介绍</a>
        <a href="#audio" class="hover:text-gray-200">音频对比</a>
        <a href="#upload" class="hover:text-gray-200 admin-only">上传音频</a>
        <a href="/admin.html" class="hover:text-gray-200 admin-only">用户管理</a>
        
        <!-- 用户信息区域 -->
        <div id="login-section" class="flex items-center space-x-2">
          <button id="login-btn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm">
            管理员登录
          </button>
        </div>
        
        <div id="user-info" class="hidden">
          <!-- 用户信息将在这里动态显示 -->
        </div>
      </div>
    </div>
  </nav>

  <!-- 登录模态框 -->
  <div id="login-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold">管理员登录</h3>
        <button id="close-modal" class="text-gray-500 hover:text-gray-700">&times;</button>
      </div>
      
      <form id="login-form">
        <div class="mb-4">
          <label for="login-username" class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
          <input 
            type="text" 
            id="login-username" 
            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            placeholder="请输入用户名"
            required
          />
        </div>
        
        <div class="mb-4">
          <label for="login-password" class="block text-sm font-medium text-gray-700 mb-2">密码</label>
          <input 
            type="password" 
            id="login-password" 
            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            placeholder="请输入密码"
            required
          />
        </div>
        
        <div class="flex space-x-3">
          <button 
            type="submit" 
            class="flex-1 bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors duration-200"
          >
            登录
          </button>
          <button 
            type="button" 
            id="cancel-login" 
            class="flex-1 bg-gray-300 hover:bg-gray-400 text-gray-700 font-medium px-4 py-2 rounded-lg transition-colors duration-200"
          >
            取消
          </button>
        </div>
      </form>
      
      <div id="auth-message" class="mt-4 hidden"></div>
    </div>
  </div>

  <!-- 主内容区 -->
  <main class="container">
    
    <!-- 介绍部分 -->
    <section id="intro" class="section card">
      <h2>平台介绍</h2>
      <p class="mb-4 text-gray-700">
        欢迎使用语音增强对比平台！本平台提供专业的语音增强效果对比功能，帮助您直观地评估不同语音处理算法的效果。
      </p>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
          <h3 class="text-lg font-semibold text-blue-800 mb-2">🎵 音频对比</h3>
          <p class="text-sm text-gray-700">
            支持原始音频、基础增强和高级增强三种版本的实时对比播放，帮助您快速评估处理效果。
          </p>
        </div>
        <div class="bg-green-50 border border-green-200 rounded-lg p-4">
          <h3 class="text-lg font-semibold text-green-800 mb-2">📤 上传功能</h3>
          <p class="text-sm text-gray-700">
            支持上传自定义音频包，包含三个处理版本，系统会自动添加到对比列表中。
          </p>
        </div>
        <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
          <h3 class="text-lg font-semibold text-purple-800 mb-2">⚡ 即时反馈</h3>
          <p class="text-sm text-gray-700">
            实时显示播放时间、支持静音控制、提供键盘快捷键，操作简单流畅。
          </p>
        </div>
      </div>
      <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
        <h3 class="text-base font-semibold text-gray-800 mb-2">💡 使用流程</h3>
        <ol class="list-decimal list-inside text-sm text-gray-700 space-y-1">
          <li>浏览默认示例音频，了解平台功能</li>
          <li>准备三个音频文件：原始版本、基础增强版本、高级增强版本</li>
          <li>在"上传音频"区域填写信息并上传音频包</li>
          <li>在"音频对比"区域播放和对比不同版本的效果</li>
          <li>根据需要删除不再需要的样本</li>
        </ol>
      </div>
    </section>

    <!-- 音频对比展示部分 -->
    <section id="audio" class="section card">
      <div class="flex justify-between items-center mb-4">
        <h2 class="m-0">语音增强对比</h2>
        <div class="text-sm text-gray-600">
          当前样本数: <span id="sample-count" class="font-bold text-green-600">2</span> / 50
        </div>
      </div>
      <p class="mb-6 text-gray-600">
        以下是上传的音频对比展示。点击播放按钮可以听到音频效果，支持快速对比不同处理方法。
      </p>

      <div class="audio-comparison-table overflow-x-auto">
        <table class="w-full border-collapse bg-white rounded-lg shadow-sm">
          <thead>
            <tr class="bg-gray-50">
              <th class="border border-gray-200 px-4 py-3 text-left font-medium text-gray-700">样本名称</th>
              <th class="border border-gray-200 px-4 py-3 text-center font-medium text-gray-700">原始音频</th>
              <th class="border border-gray-200 px-4 py-3 text-center font-medium text-gray-700">基础增强</th>
              <th class="border border-gray-200 px-4 py-3 text-center font-medium text-gray-700">高级增强</th>
              <th class="border border-gray-200 px-4 py-3 text-center font-medium text-gray-700">操作</th>
            </tr>
          </thead>
          <tbody id="audio-list">
            <!-- 默认示例音频 -->
            <tr class="hover:bg-gray-50" data-sample-id="demo1">
              <td class="border border-gray-200 px-4 py-3 font-medium text-gray-900">示例音频 1</td>
              <td class="border border-gray-200 px-4 py-3">
                <div class="audio-player">
                  <div class="audio-controls">
                    <button class="audio-play-btn" data-audio="real1-original.wav" data-sample="demo1" data-type="original">
                      <span class="play-icon">▶</span>
                    </button>
                    <button class="audio-mute-btn" data-audio="real1-original.wav" title="静音">
                      <span class="mute-icon">🔊</span>
                    </button>
                  </div>
                  <div class="audio-time-display">
                    <span class="current-time">0:00</span> / <span class="total-time">0:00</span>
                  </div>
                </div>
              </td>
              <td class="border border-gray-200 px-4 py-3">
                <div class="audio-player">
                  <div class="audio-controls">
                    <button class="audio-play-btn" data-audio="real1-basic.wav" data-sample="demo1" data-type="basic">
                      <span class="play-icon">▶</span>
                    </button>
                    <button class="audio-mute-btn" data-audio="real1-basic.wav" title="静音">
                      <span class="mute-icon">🔊</span>
                    </button>
                  </div>
                  <div class="audio-time-display">
                    <span class="current-time">0:00</span> / <span class="total-time">0:00</span>
                  </div>
                </div>
              </td>
              <td class="border border-gray-200 px-4 py-3">
                <div class="audio-player">
                  <div class="audio-controls">
                    <button class="audio-play-btn" data-audio="real1-advanced.wav" data-sample="demo1" data-type="advanced">
                      <span class="play-icon">▶</span>
                    </button>
                    <button class="audio-mute-btn" data-audio="real1-advanced.wav" title="静音">
                      <span class="mute-icon">🔊</span>
                    </button>
                  </div>
                  <div class="audio-time-display">
                    <span class="current-time">0:00</span> / <span class="total-time">0:00</span>
                  </div>
                </div>
              </td>
              <td class="border border-gray-200 px-4 py-3 text-center">
                <button class="delete-btn text-red-500 hover:text-red-700 text-sm admin-only" data-sample-id="demo1">
                  删除
                </button>
              </td>
            </tr>

            <tr class="hover:bg-gray-50" data-sample-id="demo2">
              <td class="border border-gray-200 px-4 py-3 font-medium text-gray-900">示例音频 2</td>
              <td class="border border-gray-200 px-4 py-3">
                <div class="audio-player">
                  <div class="audio-controls">
                    <button class="audio-play-btn" data-audio="real2-original.wav" data-sample="demo2" data-type="original">
                      <span class="play-icon">▶</span>
                    </button>
                    <button class="audio-mute-btn" data-audio="real2-original.wav" title="静音">
                      <span class="mute-icon">🔊</span>
                    </button>
                  </div>
                  <div class="audio-time-display">
                    <span class="current-time">0:00</span> / <span class="total-time">0:00</span>
                  </div>
                </div>
              </td>
              <td class="border border-gray-200 px-4 py-3">
                <div class="audio-player">
                  <div class="audio-controls">
                    <button class="audio-play-btn" data-audio="real2-basic.wav" data-sample="demo2" data-type="basic">
                      <span class="play-icon">▶</span>
                    </button>
                    <button class="audio-mute-btn" data-audio="real2-basic.wav" title="静音">
                      <span class="mute-icon">🔊</span>
                    </button>
                  </div>
                  <div class="audio-time-display">
                    <span class="current-time">0:00</span> / <span class="total-time">0:00</span>
                  </div>
                </div>
              </td>
              <td class="border border-gray-200 px-4 py-3">
                <div class="audio-player">
                  <div class="audio-controls">
                    <button class="audio-play-btn" data-audio="real2-advanced.wav" data-sample="demo2" data-type="advanced">
                      <span class="play-icon">▶</span>
                    </button>
                    <button class="audio-mute-btn" data-audio="real2-advanced.wav" title="静音">
                      <span class="mute-icon">🔊</span>
                    </button>
                  </div>
                  <div class="audio-time-display">
                    <span class="current-time">0:00</span> / <span class="total-time">0:00</span>
                  </div>
                </div>
              </td>
              <td class="border border-gray-200 px-4 py-3 text-center">
                <button class="delete-btn text-red-500 hover:text-red-700 text-sm admin-only" data-sample-id="demo2">
                  删除
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 播放控制说明 -->
      <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mt-6">
        <h4 class="text-sm font-semibold text-blue-800 mb-2">使用说明</h4>
        <ul class="text-sm text-blue-700 space-y-1">
          <li>• 点击播放按钮开始播放对应音频，再次点击暂停/继续</li>
          <li>• 点击静音按钮可以静音/取消静音当前音频</li>
          <li>• 时间显示格式：当前时间 / 总时长</li>
          <li>• 点击删除按钮可以移除该样本</li>
          <li>• 键盘快捷键：空格键(播放/暂停)，M键(静音)，Escape键(停止)</li>
        </ul>
      </div>
    </section>

    <!-- 游客提示信息 -->
    <section class="section card guest-only">
      <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 text-center">
        <h3 class="text-lg font-semibold text-blue-800 mb-2">🔒 游客模式</h3>
        <p class="text-blue-700 mb-4">
          您当前以游客身份浏览，只能播放和对比音频文件。如需上传或删除音频，请以管理员身份登录。
        </p>
        <button id="show-login-from-guest" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm">
          管理员登录
        </button>
      </div>
    </section>

    

    <!-- 上传音频部分 -->
    <section id="upload" class="section card admin-only">
      <h2>上传音频包</h2>
      <p class="mb-4 text-gray-700">
        上传包含三个音频文件（origin.wav, basic.wav, advance.wav），系统将自动添加到上方的对比列表中。
      </p>
      
      <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mb-4">
        <p class="text-sm text-yellow-800">
          <strong>📌 上传说明：</strong>
        </p>
        <ul class="text-xs text-yellow-700 mt-2 space-y-1">
          <li>• 支持格式：WAV、MP3</li>
          <li>• 文件大小：单个文件不超过20MB</li>
          <li>• 文件命名：系统自动添加时间戳，避免覆盖同名文件</li>
          <li>• 数据保存：<strong>永久保存在服务器</strong>，刷新页面后仍然存在</li>
          <li>• 删除说明：点击删除按钮会从服务器永久删除文件</li>
        </ul>
      </div>
      
      <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
        <p class="text-xs text-blue-700">
          <strong>💾 存储说明：</strong>音频文件上传到服务器的 <code class="bg-blue-100 px-1 rounded">uploads/</code> 目录，
          文件名格式为：<code class="bg-blue-100 px-1 rounded">原始文件名_时间戳_随机码.wav</code>
          （例如：origin_1729012345678_a1b2c3.wav），确保不会覆盖已有文件。
        </p>
      </div>
      
      <div class="upload-area">
        <div class="mb-4">
          <label class="block mb-2 text-sm font-medium text-gray-700">
            音频包名称:
          </label>
          <input 
            type="text" 
            id="audio-package-name" 
            placeholder="例如: 会议录音 1" 
            class="w-full md:w-1/2 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
        </div>
        
        <div class="mb-4">
          <label class="block mb-2 text-sm font-medium text-gray-700">
            上传音频文件:
          </label>
          <div class="flex flex-col md:flex-row gap-4">
            <div class="flex-1">
              <label class="block text-xs text-gray-600 mb-1">原始音频 (origin.wav)</label>
              <input 
                type="file" 
                id="origin-audio" 
                accept=".wav,.mp3" 
                class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
              />
            </div>
            <div class="flex-1">
              <label class="block text-xs text-gray-600 mb-1">基础增强 (basic.wav)</label>
              <input 
                type="file" 
                id="basic-audio" 
                accept=".wav,.mp3" 
                class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-green-50 file:text-green-700 hover:file:bg-green-100"
              />
            </div>
            <div class="flex-1">
              <label class="block text-xs text-gray-600 mb-1">高级增强 (advance.wav)</label>
              <input 
                type="file" 
                id="advance-audio" 
                accept=".wav,.mp3" 
                class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-purple-50 file:text-purple-700 hover:file:bg-purple-100"
              />
            </div>
          </div>
        </div>
        
        <button 
          id="upload-btn" 
          class="bg-blue-500 hover:bg-blue-600 text-white font-medium px-6 py-3 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
        >
          添加到对比列表
        </button>
        
        <div id="upload-status" class="mt-4 text-sm hidden"></div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-gray-800 text-white py-6">
    <div class="container mx-auto px-4 text-center">
      <p>语音增强对比平台 &copy; 2024</p>
    </div>
  </footer>

  <!-- 引入JavaScript -->
  <script type="module">
    // 导入功能模块
    import { initAudioControls } from '/src/js/audio.js';
    import { initUploadFeature } from '/src/js/upload.js';
    import { initAuthSystem } from '/src/js/auth.js';
    import { initUserManagement } from '/src/js/user-management.js';
    
    // 初始化功能
    document.addEventListener('DOMContentLoaded', () => {
      // 初始化认证系统
      const authSystem = initAuthSystem();
      // 关键：调用初始化以绑定事件与更新UI
      if (authSystem && typeof authSystem.init === 'function') {
        authSystem.init();
      }
      
      // 初始化音频控制
      initAudioControls();
      
      // 初始化上传功能（需要权限检查）
      initUploadFeature();
      
      // 首页不再展示用户管理区块，故不初始化用户管理脚本
      
      // 绑定游客登录按钮
      const showLoginFromGuest = document.getElementById('show-login-from-guest');
      if (showLoginFromGuest) {
        showLoginFromGuest.addEventListener('click', () => {
          authSystem.showLoginModal();
        });
      }
      
      // 绑定关闭模态框按钮
      const closeModal = document.getElementById('close-modal');
      const cancelLogin = document.getElementById('cancel-login');
      if (closeModal) {
        closeModal.addEventListener('click', () => {
          document.getElementById('login-modal').style.display = 'none';
        });
      }
      if (cancelLogin) {
        cancelLogin.addEventListener('click', () => {
          document.getElementById('login-modal').style.display = 'none';
        });
      }
    });
  </script>
</body>
</html>
